<template>
	<div class="pccarousel">
		<el-carousel :interval="5000" arrow="always" height="400px" style="width: 100%;">
		    <el-carousel-item v-for="item in carousel" :key="item.id">
			  <img :src="`http://127.0.0.1/api/public/showimg/${item.picture}`">
		    </el-carousel-item>
		</el-carousel>
	</div>
</template>

<script>
	export default{
		name : 'PCCarousel',
		data() {
			return{
				carousel:[]
			}
		},
		methods : {
			getCarousel(){
				this.$axios.get("http://127.0.0.1/api/public/findHot/1/6").then((resp)=>{
					resp.data.data.forEach((item)=>{
						this.carousel.push(item);
						console.log(this.carousel);
					})
				})
			}
		},
		mounted() {
			this.getCarousel();
		}
	}
</script>

<style scoped>
	.pccarousel{
		width: 100%;
		height: 100%;
	}
	.pccarousel img{
		width: 100%;
	}
</style>